<template>
	<view>
		<view class="h_10"></view>
		<view class="conter">
			<view class="conterFlex">
				<view class="flexLeft">姓名</view>
				<view class="flexRight">
					<input placeholder="请输入姓名" class="int" placeholder-class="intp" v-model="formData.name" />
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">手机号</view>
				<view class="flexRight">
					<input placeholder="请输入手机号" class="int" placeholder-class="intp" v-model="formData.mobile"
						type="number" maxlength="11" />
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">性别</view>
				<view class="flexRight">
					<u-radio-group v-model="formData.sex" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" active-color="#4cbd66">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">描述</view>
				<view class="flexRight">
					<view class="flexRightText">
						<textarea placeholder="请输入描述" class="textarea" v-model="formData.content"></textarea>
					</view>
				</view>
			</view>

		</view>
		<view class="zw"></view>
		<view class="footer">
			<view class="footerBtn" @click="entry()">立即提交</view>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	export default {
		data() {
			return {
				list: [{
						name: '男',
						index: 1
					},
					{
						name: '女',
						index: 2
					}
				],
				formData: {
					name: '',
					mobile: '',
					sex: '',
					content:'',
					nursing_id: ''
				},
			}
		},
		onLoad(e) {
			this.formData.nursing_id = e.id
		},
		methods: {
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				if (e == '男') {
					this.formData.sex = 1
				} else {
					this.formData.sex = 2
				}
			},
			async entry(){
				var rule = [
					{
						name: 'name',
						checkType: 'string',
						checkRule: '2,32',
						errorMsg: '姓名至少2位'
					},
					{
						name: 'mobile',
						checkType: 'phoneno',
						errorMsg: '请输入正确手机号码'
					},
					{
						name: 'sex',
						checkType: 'notnull',
						errorMsg: '请选择性别'
					}
					
				];
				//进行表单检查
				var formData = this.formData;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					await uni.request({
						url: `/addons/nursing/api.consult/add`,
						method: 'POST',
						data: formData,
						success: res => {
							this.$wanlshop.msg('提交成功');
							setTimeout(() => {
								this.$wanlshop.back(1)
							}, 1500);
						}
					});
				}else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}
		}
	}
</script>

<style lang="scss">
	.h_10 {
		width: 100%;
		height: 10rpx;
	}

	.conter {
		background: #fff;
		padding: 0 30rpx;

		.conterFlex {
			padding: 30rpx 0;
			display: flex;
			// align-items: center;

			.flexLeft {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.flexRight {
				width: 452rpx;
				height: auto;
				margin-left: auto;
				display: flex;

				.int {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.intp {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #AAAAAA;
				}

				.rightLeft {
					width: 212rpx;
					height: 128rpx;
					border: 2rpx dashed #888888;
					text-align: center;
					color: #999999;
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					position: relative;

					.iconfont {
						margin-top: 32rpx;
					}

					.rightLeftImg {
						width: 100%;
						height: 100%;
					}

					.cu-tag {
						position: absolute;
						right: 0;
						top: 0;
						border-bottom-left-radius: 3px;
						padding: 3px 6px;
						height: auto;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}

				.rightRight {
					width: 212rpx;
					height: 128rpx;
					border: 2rpx dashed #888888;
					margin-left: auto;
					text-align: center;
					color: #999999;
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					position: relative;

					.iconfont {
						margin-top: 32rpx;
					}

					.rightRightImg {
						width: 100%;
						height: 100%;
					}

					.cu-tag {
						position: absolute;
						right: 0;
						top: 0;
						border-bottom-left-radius: 3px;
						padding: 3px 6px;
						height: auto;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}

				.rightLeft1 {
					width: 144rpx;
					height: 144rpx;
					border: 2rpx dashed #888888;
					text-align: center;
					color: #999999;
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;

					.iconfont {
						margin-top: 32rpx;
					}
				}

				.flexRightText {
					width: 100%;
					height: 218rpx;
					background: #F4F4F4;
					border-radius: 6rpx;
					padding: 10rpx 20rpx;

					.textarea {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.zw {
		width: 100%;
		height: 206rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 136rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.footerBtn {
			width: 504rpx;
			height: 64rpx;
			background: #4CBD66;
			border-radius: 10rpx;
			text-align: center;
			line-height: 64rpx;
			margin: 30rpx auto;
			color: #fff;
		}
	}
</style>